<!DOCTYPE html> <!--指定html版本，默认是html 5-->

<br lang="en"> <!--指定当前页面是英文。效果：询问是否需要翻译为中文-->

<!--head：编写页面相关属性-->

<head>
    <meta charset="UTF-8"> <!--浏览器解码规则-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--移动端适配-->
    <title>Document</title> <!--title：编写页面标题-->
</head>

<!--body：编写页面内容-->

<body>
    <!-- 1. 标题标签：1~6 从大到小 -->
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>

    <h1>段落标签与换行标签</h1>
    <p>
        《老人与海》<br>是美国作家海明威于1951年在古巴写的一篇中篇小说，于1952年出版。</p>
    <p>
        该作围绕一位老年古巴渔夫，与一条巨大的马林鱼在离岸很远的湾流中搏斗而展开故事的讲述。尽管海明威笔下的老人是悲剧性的，但他身上却有着尼采“超人”的品质，泰然自若地接受失败，沉着勇敢地面对死亡，这些“硬汉子”体现了海明威的人生哲学和道德理想，即人类不向命运低头，永不服输的斗士精神和积极向上的乐观人生态度。
    </p>
    <p>
        它奠定了海明威在世界文学中的突出地位，这篇小说相继获得了1953年美国普利策奖和1954年诺贝尔文学奖。该小说曾经在48小时内就卖出了20多万本，创造了小说销量的传奇。
    </p>

    <h1>格式化标签之加粗</h1>
    <strong>《老人与海》</strong> <br />
    <b>《老人与海》</b>

    <h1>格式化标签之倾斜</h1>
    <em>《老人与海》</em> <br />
    <i>《老人与海》</i>

    <h1>格式化标签之倾斜</h1>
    <del>《老人与海》</del> <br />
    <s>《老人与海》</s>

    <h1>格式化标签之下划线</h1>
    <ins>《老人与海》</ins>
    <u>《老人与海》</u> <br>

    <h1>格式化标签之倾斜+加粗</h1>
    <strong><em>《老人与海》</em></strong>

    <h1>img之src属性</h1>
    <img src="./image/时间复杂度.png"> <br>

    <img src="https://bkimg.cdn.bcebos.com/pic/4ec2d5628535e5ddccb4df5f78c6a7efcf1b6291?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080"
        alt="图片加载失败" title="《老人与海》" width="100px" height="100px" border="20px">

    <h1>超链接标签</h1>
    <a href="https://www.baidu.com/?tn=15007414_8_dg" target="_blank">点击跳转到百度</a>

    <h1>以图片方式跳转</h1>
    <a href="https://www.baidu.com/?tn=15007414_8_dg" target="_blank">
        <img src="./image/时间复杂度.png" alt="显示失败">
    </a>

    <h1>表格标签</h1>
    <table border="1" width="500" height="300" cellspacing="0" cellpadding="60" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>3</td>
            </tr>
            <tr>
                <td>李四</td>
                <!-- <td>男</td> -->
                <td>4</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>女</td>
                <td>5</td>
            </tr>
        </tbody>

    </table>

    <h1>无序列表标签</h1>
    <ul type="disc">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ul>

    <ul type="square">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ul>

    <ul type="circle">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ul>

    <h1>有序列表标签</h1>
    <ol>
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ol>

    <!-- 小写的英文字母编号 -->
    <ol type="a">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ol>
    <!-- 大写的英文字母编号 -->
    <ol type="A">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ol>
    <!-- 小写罗马数字编号 -->
    <ol type="i">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ol>

    <!-- 大写罗马数字编号 -->
    <ol type="I">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ol>

    <!-- 默认 -->
    <ol type="1" start="3">
        <li>我在学HTML</li>
        <li>我在学习CSS</li>
        <li>我在玩原神</li>
    </ol>

    <h1>自定义列表标签</h1>

    <dl>
        <dt></dt>
        <dd>我在学HTML</dd>
        <dd>我在学习CSS</dd>
        <dd>我在玩原神</dd>
    </dl>

    <h1>表单标签之表单控件</h1>
    姓名 <input type="text" name="" id="">
    </br>
    密码 <input type="password">
    <br>
    性别 <input type="radio" name="gender" checked="">男
    <input type="radio" name="gender">女
    <br>
    爱好 羽毛球<input type="checkbox"> 乒乓球<input type="checkbox"> 篮球<input type="checkbox">
    <br>
    <input type="button" value="登录" onclick="alert('hello')">
    <br>
    <form action="链接">
        姓名 <input type="text" name="name">
        <input type="submit">
        <input type="reset" value="清空">
        <input type="file">
    </form>

    <h1>label标签</h1>
    <label for="male">男</label>
    <input id="male" type="radio" name="sex">

    <label for="female">女</label>
    <input type="radio" name="sex" id="female">

    <h1>select标签（下拉菜单）</h1>

    <select name="" id="">
        <option value="">选择年份</option>
        <option value="" selected="selected">1990</option>
        <option value="">1991</option>
        <option value="">1992</option>
    </select>

    <h1>textarea标签</h1>
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <h1>无语义标签</h1>
    <div>
        <span>吃饭</span>
        <span>睡觉</span>
        <span>玩游戏</span>
    </div>

    <div>吃饭</div>
    <div>睡觉</div>
    <div>玩游戏</div>

    <h1>html的特殊字符</h1>
    <p>这里有四个空格&nbsp;&nbsp;&nbsp;&nbsp;我开始编写页面</p>
</body>


</html>